<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script src="./jquery.min.js">
    </script>
    <script>
        $(function () {
            $("button.login").click(function () {
                console.log("login");
                if(!checkMail()){
                    return false;
                }
                if(!checkPassword()){
                    return false;
                }
                login();
            });

        });

        function login() {
            var url="http://www.test.com/api/user/login/"+$("input.mail").val()+"/"+$("input.password").val();
            console.info(url);
            $.ajax({
                method:"get",
                url:url,
                dataType:"text",
                success:function (data) {
                    console.info(data);
                    if(data===$("input.mail").val()){
                        alert("登录成功...即将跳转到主页")
                        setTimeout(function () {
                            window.location.href="./welcome.html";
                        },3000)
                    }else {
                        alert("邮箱或密码错误");
                    }
                },
                error:function (data) {
                    alert("请求失败！")
                },
            })
        }

        function checkMail() {
            var mail=$("input.mail").val();
            var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
            if (mail===""){
                alert("请输入邮箱");
                return false;
            }
            if(!reg.test(mail)){
                alert("请输入正确的邮箱地址");
                return false;
            }
            return true;
        }

        function checkPassword() {
            if($("input.password").val()===""){
                alert("请输入密码");
                return false;
            }
            return true;
        }
    </script>
</head>
<style>
    .box{
        margin-top: 120px;
        margin-left: 15%;
        margin-right: 15%;
        height: 200px;
        font-size: 18px;
    }
    .div1{
        margin: 20px 20%;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items:center;
    }

    .span1{

    }
    input{
        width: 250px;
        height: 30px;
        border: none;
        outline:none;
        border-bottom: solid 1px ;
    }
    button{
        margin-top: 20px;
        cursor: pointer;
        height: 40px;
        width: 300px;
        text-align: center;
        background-color: aquamarine;
        display: flex;
        align-items:center;
        justify-content: center;
        font-size: 18px;
    }
</style>
<body>
<div class="box" >
    <div class="div1">
        <span class="span1">邮箱：</span><input class="mail" type="text">
    </div>
    <div class="div1" >
        <span class="span1">密码：</span><input   class="password" type="password">
    </div>
    <div class="div1" >
        <button class="login" type="button">登录</button>
    </div>
    <div class="div1" >
        <a href="./register.html">注册新账号</a>
    </div>
</div>

</body>
</html>